<template>
  <div class="wrap">
    <div>
      <a-button class="add" type="primary" @click="showModal('add')"
        >添加</a-button
      >
    </div>
    <div>
      <a-table
        :dataSource="dataList"
        :columns="columns"
        rowKey="id"
        :pagination="false"
      >
        <template #class="{ record }">
          <span>{{ record.class == '1' ? '按类型' : record.class == '2' ? '按部位' : '按科室'}}</span>
        </template>
        <template #operation="{ record }">
          <a-button
            type="primary"
            style="margin-right: 10px"
            @click="showModal('upd', record)"
            >修改</a-button
          >
          <a-button type="primary" danger @click="del(record.id)"
            >删除</a-button
          >
        </template>
      </a-table>
      <div class="page">
        <a-pagination
          v-model:current="current"
          v-model:pageSize="pageParams.limit"
          :total="total"
          show-less-items
          show-size-changer
          @showSizeChange="onShowSizeChange"
          @change="onChange"
        />
      </div>
    </div>
    <a-modal
      v-model:visible="visible"
      :title="modalType == 'add' ? '添加种类' : '修改种类'"
      @ok="handleOk"
    >
      <a-form :model="formState">
        <a-form-item label="查询类别">
          <a-radio-group v-model:value="formState.class">
            <a-radio value="1" name="type">按类型</a-radio>
            <a-radio value="2" name="type">按部位</a-radio>
            <a-radio value="3" name="type">按科室</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="类型名">
          <a-input v-model:value="formState.typeName" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {
  h,
  ref,
  toRefs,
  reactive,
  onMounted,
  computed,
  watch,
  createVNode,
} from "vue";
import utils from "@/utils/utils";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import Service from "@/api/service";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import columns from "./components/columns";

export default {
  setup() {
    const state = reactive({
      dataList: [],
      columns: columns,
      current: 1, // 当前分页
      pageParams: {
        p: 1,
        limit: 10,
      },
      total: 1,
      visible: false,
      currentId: "",  // 当前选中的item ID
      // 表单数据
      formState: {
        class: 1,
        typeName: "",
      },
      modalType: "",  // 模态框类型
    });
    onMounted(async () => {
      getDataList();
    });
    const getDataList = async () => {
      const { data: res } = await Service.getAllType(state.pageParams);
      console.log(res);
      res.data.forEach((item) => {
        item.created_at = utils.formatDateTime(item.created_at);
      });
      state.dataList = res.data;
      state.total = res.total;
    };
    const del = async (id) => {
      Modal.confirm({
        title: () => "提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "确定删除吗?",
        okText: () => "确定",
        okType: "danger",
        cancelText: () => "取消",

        async onOk() {
          const res = await Service.delType({ id: id });
          if (res.code == "0") {
            message.success("删除成功");
            getDataList();
          }
        },

        onCancel() {},
      });
    };
    const showModal = async (type, data) => {
      console.log(type, data);
      if (type == "add") {
        (state.formState.class = "1"), (state.formState.typeName = "");
      }
      if (data) {
        state.currentId = data.id;
        (state.formState.class = data.class),
          (state.formState.typeName = data.typeName);
      }
      state.modalType = type;
      state.visible = true;
    };
    const handleOk = async () => {
      let res = {};
      if (state.modalType == "add") {
        res = await Service.postAddDiseaseType(state.formState);
      } else {
        let obj = state.formState;
        obj.id = state.currentId;
        res = await Service.updType(obj);
      }
      if (res.code == "0") {
        state.visible = false;
        message.success(res.message);
        getDataList();
      }
    };
    // 分页
    const onShowSizeChange = async (current, pageSize) => {
      state.pageParams.p = 1;
      state.pageParams.limit = pageSize;
      getDataList();
    };
    const onChange = async (pageNumber) => {
      state.pageParams.p = pageNumber;
      getDataList();
    };
    return {
      ...toRefs(state),
      showModal,
      del,
      onShowSizeChange,
      onChange,
      handleOk,
    };
  },
};
</script>

<style lang='less' scoped>
.wrap {
  position: relative;
}
.page {
  // position: absolute;
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
.add {
  margin: 20px 0px;
}
</style>
